<template>
	<view class="my-details">
		<view class="detail-top">
			<view class="info-1">
				<image src="../../static/my/tx.png" mode="" class="avatar"></image>
				<view class="avatar-info">
					<view class="info-1-top">
						<view class="info-name">
							赵敏
						</view>
						<view class="info-tag1">
							女 24岁
						</view>
						<view class="info-tag2">
							IP : {{localtion}}
						</view>
					</view>
					<view class="info-1-id">
						ID：00023-00021
					</view>
					<view class="info-1-grade" @click="toStar">
						<view class="grade-title">
							诚信等级
						</view>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<view class="my-auth">
			<view class="auth-title">
				<view class="title-left">
					会员认证
				</view>
				<view class="title-right">
					点击图标进行认证
				</view>
			</view>
			<view class="auth-tags">
				<view class="tag" v-for="(item,index) in tags" :key="index">
					<view class="tag-top">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="tag-bottom">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="details-tab">
			<view :class="activeTab==index?'tab-active' :'tab'" v-for="(item,index) in tabs" :key="index"
				@click="clickTab(index)">
				{{item}}
			</view>
		</view>

		<view class="details-info">
			<uv-cell-group :border="false" v-if="activeTab==0">
				<uv-cell isLink url="/pages/complaint/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							基本资料</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/agreement/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							教育/工作</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							民族生活习俗</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							原生家庭</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							本人生活习惯</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							本人性格</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							婚姻观</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							经济状况及金钱观</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							形象气质</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							兴趣爱好</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							我的择偶要求</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							民族生活习俗</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" customStyle="height:104rpx;" :cellStyle="cellStyle">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 550;color: #333333;">
							我的内心独白</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
			</uv-cell-group>

		</view>
	</view>
</template>

<script>
	export default {
		onShow() {},
		data() {
			return {
				localtion: "",
				tabs: ["资料", "相册", "视频"],
				activeTab: 0,
				cellStyle: {
					"padding": "32rpx 0rpx",
				},
				tags: [{
					title: "手机",
					image: "../../static/my/sj-h.png",
					activeImage: "../../static/my/sj-h.png"
				}, {
					title: "身份证",
					image: "../../static/my/sfz-h.png",
					activeImage: "../../static/my/sfz-h.png",
				}, {
					title: "婚姻",
					image: "../../static/my/hy-h.png",
					activeImage: "../../static/my/hy.png",
				}, {
					title: "学历",
					image: "../../static/my/xl-h.png",
					activeImage: "../../static/my/xl.png",
				}, {
					title: "房产",
					image: "../../static/my/fc-h.png",
					activeImage: "../../static/my/fc.png",
				}, {
					title: "汽车",
					image: "../../static/my/qc-h.png",
					activeImage: "../../static/my/qc.png",
				}, {
					title: "工作",
					image: "../../static/my/gz-h.png",
					activeImage: "../../static/my/gz.png",
				}]
			}
		},
		created() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						this.localtion = res.address.city
					}
				});
			},
			clickTab(index) {
				this.activeTab = index
			},
			toStar() {
				let url = '../../subcontract/myStar/index'
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-details {
		width: 750rpx;
		// height: 1000rpx;
		// background-color: red;
		margin-top: 54rpx;

		.detail-top {
			height: 218rpx;
			width: 750rpx;
			// background-color: red;
			padding-left: 48rpx;
			border-bottom: 2rpx solid #F6F6F6;

			// 上侧头像等
			.info-1 {
				height: 152rpx;
				width: 700rpx;
				display: flex;
				// background-color: #fff;

				.avatar {
					width: 152rpx;
					height: 152rpx;
					border-radius: 50%;
					object-fit: contain;
					border: 2rpx solid #fff;
				}

				.avatar-info {
					width: 332rpx;
					height: 152rpx;
					// background-color: red;
					margin-left: 28rpx;
					padding-top: 8rpx;
					box-sizing: border-box;

					.info-1-top {
						// background-color: #fff;
						height: 40rpx;
						width: 332rpx;
						display: flex;
						align-items: center;

						.info-name {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #333333;
						}

						.info-tag1 {
							width: 112rpx;
							height: 40rpx;
							background: rgba(209, 209, 209, 0.25);
							border-radius: 30rpx;
							backdrop-filter: blur(10px);
							margin-left: 20rpx;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.info-tag2 {
							width: 112rpx;
							height: 40rpx;
							background: rgba(209, 209, 209, 0.25);
							border-radius: 30rpx;
							backdrop-filter: blur(10px);
							margin-left: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.info-1-id {
						width: 332rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						// opacity: 0.5;
						line-height: 34rpx;
						margin-top: 20rpx;
						// background-color: #fff;
					}

					.info-1-grade {
						width: 332rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
						margin-top: 12rpx;
						display: flex;
						align-items: center;

						.grade-title {
							margin-right: 10rpx;
						}

						// background-color: #fff;
						image {
							width: 20rpx;
							height: 19rpx;
							margin-left: 6rpx;
						}
					}
				}
			}


		}

		.my-auth {
			width: 750rpx;
			height: 240rpx;
			border-radius: 18rpx;
			border: 2rpx solid #F6F6F6;
			background-color: #fff;
			padding-top: 32rpx;
			padding-left: 48rpx;
			padding-right: 48rpx;
			box-sizing: border-box;

			.auth-title {
				display: flex;
				align-items: center;
				height: 44rpx;

				.title-left {
					width: 130rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
				}

				.title-right {
					width: 202rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-left: 18rpx;
					margin-top: 8rpx;
				}
			}

			.auth-tags {
				// background-color: red;
				width: 100%;
				height: 92rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.tag {
					width: 72rpx;
					height: 92rpx;
					background-color: #fff;

					.tag-top {
						width: 72rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.tag-bottom {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						display: flex;
						justify-content: center;
						margin-top: 22rpx;
					}
				}
			}

		}

		.details-tab {
			height: 108rpx;
			width: 750rpx;
			background-color: #FAFAFA;
			display: flex;
			// align-items: center;
			padding-left: 48rpx;
			box-sizing: border-box;

			.tab {
				width: 64rpx;
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				margin-right: 32rpx;
				margin-top: 36rpx;
			}

			.tab-active {
				width: 64rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 44rpx;
				margin-right: 32rpx;
				margin-top: 32rpx;
			}
		}

		.details-info {
			// height: 1294rpx;
			width: 750rpx;
			// background-color: red;
			position: absolute;
			// padding-top: 32rpx;
			box-sizing: border-box;
			padding-bottom: 56rpx;
			padding-left: 48rpx;
			padding-right: 48rpx;
		}

	}
</style>